<template>
  <ContentDetailWrap :title="t('warehouse.add')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
      <BaseButton type="primary" :loading="loading" @click="submit(formRef)">
        {{ t('action.save') }}
      </BaseButton>
    </template>
    <!--    表单-->
    <el-form :model="form" ref="formRef" :rules="rules as FormRules" label-width="110px">
      <div class="flex justify-between">
        <div class="w-50%">
          <el-form-item :label="t('follow.customer_id')" prop="customer_id">
            <el-input v-model="form.customer_name" clearable disabled style="width: 360px" />
            <!--            <el-button class="m-l-20px" size="small" type="primary" @click="handleOpenCustomer"-->
            <!--            >{{ t('wholesalOrder.selectCustomers') }}-->
            <!--            </el-button>-->
          </el-form-item>
          <el-form-item :label="t('follow.follow_business')" prop="order_id">
            <el-select
              v-model="form.follow_business"
              :filterable="true"
              disabled
              :placeholder="t('follow.follow_business')"
              :clearable="true"
              style="width: 100px"
            >
              <el-option
                v-for="item in businessList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-input
              v-model="form.order_no"
              clearable
              disabled
              style="width: 250px; margin-left: 10px"
            />
            <!--            <el-button class="m-l-20px" size="small" type="primary" @click="handleOpenOrder"-->
            <!--            >{{ t('wholesalOrder.selectCustomers') }}-->
            <!--            </el-button>-->
          </el-form-item>
          <el-form-item :label="t('follow.follow_method')" prop="follow_method">
            <el-select
              v-model="form.follow_method"
              :filterable="true"
              :placeholder="t('follow.follow_method')"
              :clearable="false"
            >
              <el-option
                v-for="item in methodList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item :label="t('follow.follow_time')" prop="follow_time">
            <el-date-picker
              v-model="form.follow_time"
              type="datetime"
              placeholder="拜访时间"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="YYYY-MM-DD h:m:s"
            />
          </el-form-item>
        </div>
        <div class="w-50%">
          <el-form-item :label="t('follow.follow_content')" prop="follow_content">
            <el-input
              v-model="form.follow_content"
              type="textarea"
              :autosize="{ minRows: 10, maxRows: 15 }"
              :placeholder="t('follow.follow_content')"
            />
          </el-form-item>
        </div>
      </div>
    </el-form>
  </ContentDetailWrap>

  <DialogCustomerChecked
    ref="DialogCustomerCheckedRef"
    @expose-multiple-data="getExposeCustomerData"
  />
  <DialogOrderChecked ref="DialogOrderCheckedRef" @expose-multiple-data="getExposeOrderData" />
</template>

<script setup lang="ts">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ElButton, ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { getEnumApi, getInfoApi, editDataApi } from '@/api/customerFollow'
import DialogCustomerChecked from '@/views/Customer/Follow/DialogCustomerChecked/index.vue'
import DialogOrderChecked from '@/views/Customer/Follow/DialogOrderChecked/index.vue'

const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

const loading = ref<boolean>(false)

const methodList = ref<Array<Record<string, any>>>([])
const businessList = ref<Array<Record<string, any>>>([])
const ordertypeList = ref<Array<Record<string, any>>>([])

const DialogCustomerCheckedRef = ref()
const DialogOrderCheckedRef = ref()

const formRef = ref<FormInstance>()
const form = ref<Record<string, any>>({
  customer_id: '',
  follow_method: '',
  follow_time: '',
  follow_business: '',
  order_id: '',
  order_type: '',
  follow_content: ''
})
const rules = ref<FormRules>({
  customer_id: [
    {
      required: true,
      message: t('follow.customerIdMsg'),
      trigger: 'change'
    }
  ],
  follow_method: [
    {
      required: true,
      message: t('follow.followMethodMsg'),
      trigger: 'change'
    }
  ],
  // order_id: [
  //   {
  //     required: true,
  //     message: t('follow.orderIdMsg'),
  //     trigger: 'change'
  //   }
  // ],
  order_type: [
    {
      required: true,
      message: t('follow.orderTypeMsg'),
      trigger: 'change'
    }
  ],
  follow_content: [
    {
      required: true,
      message: t('follow.followContentMsg'),
      trigger: 'change'
    }
  ],
  follow_time: [
    {
      required: true,
      message: t('follow.followTimeMsg'),
      trigger: 'change'
    }
  ]
})

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      const resp = await editDataApi(form.value)
      if (resp.code === 0) {
        ElMessage.success(t('follow.editSucMsg'))
        push({ path: '/customer/followList' })
      }
    }
  })
}

//接收勾选中的客户
const getExposeCustomerData = (val: any[]) => {
  if (!val || !val.length) return
  form.value.customer_id = val[0].id
  form.value.customer_name = val[0].cusname
}
const getExposeOrderData = (val: any[]) => {
  if (!val || !val.length) return
  form.value.order_id = val[0].id
  form.value.order_no = val[0].order_no
  form.value.order_type = val[0].order_type
}
const handleOpenOrder = () => {
  // 判断客户id不能为空
  if (!form.value.customer_id) {
    ElMessage.warning(t('follow.customerIdMsg'))
    return
  }
  // if (!form.value.follow_business) {
  //   ElMessage.warning(t('follow.followBusinessMsg'))
  //   return
  // }
  nextTick(() => {
    DialogOrderCheckedRef!.value!.dialogVisible = true
    DialogOrderCheckedRef!.value!.initialize(
      form.value.order_id ? [{ ...form.value, id: form.value.order_id }] : [],
      form.value.customer_id
    )
  })
}

//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getEnumApi({ field: 'all' })
  methodList.value = resp.data.follow_method
  businessList.value = resp.data.follow_business
  ordertypeList.value = resp.data.order_type
}

//获取回显数据
const getBackShow = async () => {
  const resp = await getInfoApi(query.id as string)
  form.value.customer_id = resp.data.customer_id
  form.value.follow_method = resp.data.follow_method
  form.value.follow_time = resp.data.follow_time
  form.value.follow_business = resp.data.follow_business
  form.value.order_id = resp.data.order_id
  form.value.order_type = resp.data.order_type
  form.value.follow_content = resp.data.follow_content
  form.value.order_no = resp.data.order_no
  form.value.customer_name = resp.data.customer_name
  form.value.id = query.id
}

onMounted(() => {
  getBackShow()
  getDropDownBoxInfo()
})
</script>
<style lang="less" scoped></style>
